<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
    <div id="app">
        
    </div>

    <div id="app2">
        <cpn2></cpn2>
        <!-- <cpn1></cpn1> -->
    </div>
    <!-- 1. <script type="text/x-template" id="cpnC1"> -->
    <!-- <script type="text/x-template" id="cpnC1">
        <div>
            <h2>你好</h2>  
            <h2>你好</h2>  
        </div>
    </script> -->

    <!-- 2. <template></template> -->
    <template id="cpnC2">
        <div>
            <h2>你好2</h2>  
            <h2>你好2</h2>  
        </div>
    </template>
    <script>
        // 注册全局组件 
        // Vue.component('cpn1',{ // 1.
        //     template:`#cpnC1`
        // })

        // 2. template
        Vue.component('cpn2',{ // 1.
            template:`#cpnC2`
        })

        const app = new Vue({
            el:'#app',
            components:{
                // cpn1:{
                //     template:`#cpnC1`
                // }
            }  
        })

        const app2 = new Vue({
            el:'#app2',
            components:{
                
            }  
        })

    </script>
</body>
</html>